<template>
<view class="back">
  <!--  <view class="container">-->
  <view class="title">请选择您的身份</view>

  <!-- 原生radio-group组件，v-model直接绑定selectedRole -->
  <view class="uni-list">
    <radio-group @change="radioChange">
      <label class="radioItem" v-for="(item, index) in items" :key="item.value">
        <view>
          <radio :value="item.value" :checked="index === current" />
        </view>
        <view class="radio text">{{item.name}}</view>
      </label>
    </radio-group>
  </view>
  <view>
    <button class="login-btn" @click="handleLogin">登录</button>

  </view>
</view>


</template>

<script setup>

// 初始值为空字符串，与 radio 的 value 类型一致
import { ref } from 'vue';

// 定义单选框数据
const items = ref([
  {
    value: 'teacher',
    name: '老师',
     // Vue3 中建议使用布尔值而非字符串'true'
  },
  {
    value: 'student',
    name: '学生'
  }
]);

// 当前选中项的索引
const current = ref(0);
const RadioValue = ref('');
const radioChange =(evt)=>{
  RadioValue.value = evt.detail.value;
  console.info(RadioValue.value)
  for (let i = 0; i < items.value.length; i++) {
    if (items.value[i].value === evt.detail.value) {
      current.value = i;
      break;
    }
  }
}

const handleLogin = () => {
  console.log('选中的值：', RadioValue.value); // 调试用
  if (RadioValue.value === 'teacher') {
    uni.navigateTo({ url: '/pages/Homepage/teacherHome' });
  } else if (RadioValue.value === 'student') {
    uni.navigateTo({ url:
          '/pages/Homepage/Homepage' });
  } else {
    uni.showToast({ title: '请选择身份', icon: 'none' });
  }
};
</script>

<style scoped>

.back{
  background-color: #F2F4F7;
  height: 670px;
  padding-top: 12px;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 50rpx 0;
}

.uni-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 60rpx;
}

.radioItem{
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 10px;
  //background-color: #FFFFFF;
}


.radio text {
  margin-left: 20rpx;
  font-size: 32rpx;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
  color: white;
  border-radius: 8rpx;
}
</style>
